<script setup lang="ts" name="FormList">
import { ref, watch } from 'vue';
import emitter from '@/utils/bus';
import { judgeKey } from '@/utils/common';

interface Props {
  data: any
  formList: any
  comp?: string | null
}
const props = defineProps<Props>();
const formConfig = ref<any>()
const formData = ref<any>()
watch(() => props.data, () => {
  formData.value = props.data
  handleForm();
}, { deep: true })
watch(() => props.formList, () => {
  formConfig.value = props.formList
})
const handleForm = () => {
  props.formList.forEach((element:any) => {
    element.formList.forEach((element_form:any) => {
      if (judgeKey(element_form, 'hidden') && judgeKey(element_form, 'judge')) {
        element_form.hidden = element_form.judge(props.data)
      }
    });
  });
}
const handleEvent = (key: string) => {
  emitter.emit(`changeForm-${props.comp}`, {key, value: formData.value[key]})
}
const handleOpen = () => {
  emitter.emit(`openDialog-${props.comp}`)
}
</script>

<template>
  <el-form :model="formData" label-width="auto" style="max-width: 600px">
    <div v-for="(item, index) in formConfig" :key="index">
      <div class="title"><span></span><span>{{ item.label }}</span></div>
      <div v-for="(item_form, index1) in item.formList" :key="index1">
        <el-form-item :label="item_form.label" v-if="!item_form.hidden">
          <el-input v-if="item_form.type === 'input'" v-model="formData[item_form.value]" :placeholder="item_form.placeholder" @change="handleEvent(item_form.value)" />
          <el-input-number
            v-if="item_form.type === 'inputNumber'"
            v-model="formData[item_form.value]"
            :placeholder="item_form.placeholder"
            :min="item_form.min || 0"
            :max="item_form.max || 100"
            controls-position="right"
            style="width: 100%;"
            @change="handleEvent(item_form.value)"
          />
          <el-switch v-if="item_form.type === 'switch'" v-model="formData[item_form.value]" @change="handleEvent(item_form.value)" />
          <el-select v-if="item_form.type === 'select'" v-model="formData[item_form.value]" :placeholder="item_form.placeholder" @change="handleEvent(item_form.value)">
            <el-option v-for="(item_select, index2) in item_form.list" :key="index2" :value="item_select.value" :label="item_select.label"/>
          </el-select>
          <el-radio-group v-if="item_form.type === 'radio'" v-model="formData[item_form.value]" @change="handleEvent(item_form.value)">
            <el-radio v-for="(item_radio, index3) in item_form.list" :key="index3" :value="item_radio.value">{{ item_radio.label }}</el-radio>
          </el-radio-group>
          <el-color-picker v-if="item_form.type === 'colorPicker'" v-model="formData[item_form.value]" @change="handleEvent(item_form.value)"/>
          <el-button v-if="item_form.type === 'btn'" class="default" @click="handleOpen">{{ item_form.value }}</el-button>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.el-form{
  padding: 0 10px;
  .title {
    line-height: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    span:first-child {
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #409eff;
      border-radius: 4px;
      margin-right: 8px;
    }
  }
  .el-form-item{
    margin-bottom: 10px;
  }
}
</style>
